import React from 'react';
import { Icon } from 'antd';
import styles from './index.less';

/**
 * 自定义iconfont图标组件
 */

const IconFont = ({ icon, className = '', isButton = false, style, disabled = false, ...otherprops }) => {
    const styleObj = {
        ...style,
        ...(disabled === true && { color: 'rgba(0, 0, 0, 0.25)' }),
        ...(disabled === true && (style?.backgroundColor || style?.background) && { background: 'rgba(0, 0, 0, 0.02)' })
    };
    return (
        <>
            {typeof icon === 'string' && icon.startsWith('icon') ? (
                <i
                    className={`iconfont ${icon} ${className} ${isButton ? styles.iconButton : ''}`}
                    style={styleObj}
                    {...otherprops}
                    onClick={e => {
                        const { onClick } = otherprops || {};
                        if (disabled) {
                            return;
                        }
                        if (onClick) {
                            onClick(e);
                        }
                    }}
                />
            ) : (
                <Icon type={icon} className={className} style={styleObj} disabled={disabled} {...otherprops} />
            )}
        </>
    );
};

export default IconFont;
